<template>
  <div class="page-comment">
    <div class="comment df">
      <div class="left-comment df fdc aic jcc"
        style="border-right:1px solid #ccc">
        <span color="#f2d45d">{{ shopData.score }}</span>
        <span>综合评分</span>
        <span>高于周边商家96%</span>
      </div>
      <div class="right-comment df fdc jcc">
        <span>服务态度
          <van-rate class="ml10" v-model="commentList.score" :size="10"
            color="#f2d45d" void-icon="star" void-color="#eee" allow-half />
        </span>
        <span>菜品质量
          <van-rate class="ml10" v-model="commentList.score" :size="10"
            color="#f2d45d" void-icon="star" void-color="#eee" allow-half />
        </span>
        <span>送达时间</span>
      </div>
    </div>
    <div class="comment-nav mt20">
      <!-- 评论导航 -->
      <van-tabs class="commentNavs" type="card" v-model="active"
        title-active-color="#000" title-inactive-color="#f2d45d"
        color="#f2d45d">
        <!-- 全部 -->
        <van-tab :title="`全部${commentList.length}`">
          <!-- <div class="commentList"> -->
            <div class="all-comment df jcsb mt20 p15"
              v-for="(item,index) in commentList" :key="index">
              <img class="avatar mr10" :src="item.avatar" />
              <div style="width:300px;">
                <div class="df jcsb">
                  <span>{{ item.username }}</span>
                  <span>评论时间{{item.score}} </span>
                </div>

                <!-- 评分 -->
                <div class="mt10">
                  <van-rate :v-model="item.score" :size="15" allow-half
                    color="#ffd21e" void-icon="star" void-color="#eee" />
                  <span class="ml10">{{item.deliveryTime}}分钟送达</span>
                </div>
                <!-- 评论内容 -->
                <div class="comment-text mt10">{{item.text}}</div>
                <div class="recommend mt10">
                  <!-- 点赞手势 -->
                  <van-icon name="good-job" :color="item.score<3?'':'#ffd21e'"
                    size="20" />
                  <!-- recommend -->
                  <van-tag class="ml10 mt10" plain
                    v-for="(item,index) in item.recommend" :key="index">{{item}}
                  </van-tag>
                <!-- </div> -->
              </div>
              <!-- 切割线 -->
              <!-- <van-divider class="mt20" hairline/> -->
            </div>
          </div>
        </van-tab>

        <!-- 满意 score>=3-->
        <van-tab :title="`满意${goodRateList.length}`">
          <!-- <div class="commentList"> -->
            <div class="all-comment df jcsb mt20 p15"
              v-for="(item,index) in goodRateList" :key="index">
              <img class="avatar mr10" :src="item.avatar" />
              <div style="width:300px;">
                <div class="df jcsb">
                  <span>{{ item.username }}</span>
                  <span>评论时间</span>
                </div>

                <!-- 评分 -->
                <div class="mt10">
                  <van-rate :v-model="item.score" :size="15" allow-half
                    color="#ffd21e" void-icon="star" void-color="#eee" />
                  <span class="ml10">{{item.deliveryTime}}分钟送达</span>
                </div>
                <!-- 评论内容 -->
                <div class="comment-text mt10">{{item.text}}</div>
                <div class="recommend mt10">
                  <!-- 点赞手势 -->
                  <van-icon name="good-job" color="#ffd21e" size="20" />
                  <!-- recommend -->
                  <van-tag class="ml10 mt10" plain
                    v-for="(item,index) in item.recommend" :key="index">{{item}}
                  </van-tag>
                </div>
              </div>
              <!-- 切割线 -->
              <!-- <van-divider class="mt20" hairline/> -->
            <!-- </div> -->

          </div>
        </van-tab>
        <!-- 不满意 score<3-->

        <van-tab :title="`不满意${badRateList.length}`">
          <!-- <div class="commentList"> -->
            <div class="all-comment df jcsb mt20 p15"
              v-for="(item,index) in badRateList" :key="index">
              <img class="avatar mr10" :src="item.avatar" />
              <div style="width:300px;">
                <div class="df jcsb">
                  <span>{{ item.username }}</span>
                  <span>评论时间{{item.score}} </span>
                </div>

                <!-- 评分 -->
                <div class="mt10">
                  <van-rate :v-model="item.score" :size="15" allow-half
                    color="#ffd21e" void-icon="star" void-color="#eee" />
                  <span class="ml10">{{item.deliveryTime}}分钟送达</span>
                </div>
                <!-- 评论内容 -->
                <div class="comment-text mt10">{{item.text}}</div>
                <div class="recommend mt10">
                  <!-- 点赞手势 -->
                  <van-icon name="good-job" color="item.score<3?'':'#ffd21e'"
                    size="20" />
                  <!-- recommend -->
                  <van-tag class="ml10 mt10" plain
                    v-for="(item,index) in item.recommend" :key="index">{{item}}
                  </van-tag>
                </div>
              </div>
              <!-- 切割线 -->
              <!-- <van-divider class="mt20" hairline/> -->
            <!-- </div> -->

          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";
import BScroll from "@better-scroll/core";
export default {
  data() {
    return {
      active: 0,
    };
  },
  computed: {
    ...mapState("shop", ["shopData",'commentList']),
    ...mapGetters('shop',['goodRateList','badRateList'])
  },
  methods: {
    ...mapActions("shop", ["A_getShopInfo",'A_getCommentData']),
    //渲染滚动
    // renderScroll() {
    //   this.$nextTick(() => {
    //     let bs = new BScroll(".commentList", {
    //       click: true,
    //     });
    //   });
    // },
  },
  created() {
    this.A_getShopInfo();
    this.A_getCommentData();
    // this.renderScroll();
  },
};
</script>

<style lang="scss" scoped>
.page-comment {
  background: #f4f5f7;
  .comment {
    background: #fff;
    width: 100%;
    padding: 10px;

    .left-comment {
      width: 40%;
      // text-align: center;
    }
    .right-comment {
      width: 50%;
      padding: 10px;
    }
  }
  .comment-nav {
    background: #fff;
    padding-top: 20px;
    overflow: hidden;
  }
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.van-tab {
  width: 100%;
}
.all-comment {
  border-bottom: 1px solid #ccc;
}
</style>